<template>
	<view class="container">
		<text class="title">生鲜优选</text>
		<text class="amount">支付金额：￥{{ totalPrice }}</text>
		<text class="method">支付方式：{{ currentPaymentMethod }}</text>
		<button class="pay-button" @click="pay">立即付款</button>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request';
	import {
		debounce
	} from '../../utils/common.js';
	export default {
		data() {
			return {
				orderId: '',
				totalPrice: 0,
				currentPaymentMethod: ''
			}
		},

		methods: {
			pay: debounce(async function() {
				const resp = await request({
					url: 'order/pay?orderId=' + this.orderId,
					method: 'GET'
				})
				console.log(resp);
				if (resp.code === 200) {
					uni.reLaunch({
						url: '/pages/myOrders/myOrders'
					});
				} else if (resp.code === 2007) {
					uni.showToast({
						title: '该订单超时未支付，已取消，请重新下单！',
						position:'center'
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			})
		},

		onLoad(options) {
			// 获取传递的参数
			this.totalPrice = options.totalPrice;
			this.currentPaymentMethod = options.paymentMethod;
			this.orderId = options.orderId;
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.amount,
	.method {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.pay-button {
		background-color: #007aff;
		color: #fff;
		padding: 12px 16px;
		border: none;
		border-radius: 4px;
		margin-top: 500px;
		width: 90%;

		&:hover {
			background-color: darken(#007aff, 10%);
		}
	}
</style>